import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { colors, spacing, typography } from '../styles/variables';
import { Card, Title, Paragraph, Button, Flex, Grid } from '../styles/components';

const VIPHeader = styled.div`
  text-align: center;
  padding: ${spacing.xl} 0;
  margin-bottom: ${spacing.xl};
`;

const VIPBadge = styled.div`
  display: inline-flex;
  align-items: center;
  gap: ${spacing.sm};
  background: ${colors.gradientGold};
  color: ${colors.background};
  padding: ${spacing.sm} ${spacing.lg};
  border-radius: ${spacing.lg};
  font-weight: ${typography.fontWeight.bold};
  margin-bottom: ${spacing.lg};
`;

const PricingCard = styled(Card)`
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 2px solid ${props => props.featured ? colors.primary : colors.border};

  ${props => props.featured && `
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  `}
`;

const PricingHeader = styled.div`
  padding: ${spacing.lg};
  border-bottom: 1px solid ${colors.border};
  background: ${props => props.featured ? 'rgba(245, 158, 11, 0.1)' : colors.backgroundSecondary};
`;

const PlanName = styled.h3`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize['2xl']};
  margin-bottom: ${spacing.sm};
`;

const PlanPrice = styled.div`
  font-size: ${typography.fontSize['3xl']};
  font-weight: ${typography.fontWeight.bold};
  color: ${colors.primary};
  margin-bottom: ${spacing.sm};
`;

const PlanDescription = styled.p`
  color: ${colors.textSecondary};
`;

const PricingBody = styled.div`
  padding: ${spacing.lg};
`;

const FeatureList = styled.ul`
  text-align: left;
  margin: ${spacing.lg} 0;
`;

const FeatureItem = styled.li`
  color: ${colors.textPrimary};
  margin-bottom: ${spacing.sm};
  display: flex;
  align-items: center;
  gap: ${spacing.sm};

  &::before {
    content: '✓';
    color: ${colors.success};
    font-weight: bold;
  }
`;

const RecommendedBadge = styled.div`
  position: absolute;
  top: 10px;
  right: -30px;
  background: ${colors.primary};
  color: ${colors.background};
  padding: ${spacing.sm} ${spacing.xl};
  transform: rotate(45deg);
  font-size: ${typography.fontSize.sm};
  font-weight: ${typography.fontWeight.bold};
`;

const BenefitsSection = styled.div`
  margin: ${spacing.xxl} 0;
`;

const BenefitCard = styled(Card)`
  text-align: center;
`;

const BenefitIcon = styled.div`
  font-size: 2.5rem;
  margin-bottom: ${spacing.md};
`;

const BenefitTitle = styled.h4`
  color: ${colors.textPrimary};
  margin-bottom: ${spacing.sm};
`;

const TestimonialCard = styled(Card)`
  text-align: center;
`;

const TestimonialText = styled.p`
  font-style: italic;
  color: ${colors.textPrimary};
  margin-bottom: ${spacing.lg};
`;

const TestimonialAuthor = styled.p`
  color: ${colors.textSecondary};
  font-weight: ${typography.fontWeight.medium};
`;

const faqItems = [
  {
    question: 'VIP会员有哪些特权？',
    answer: 'VIP会员享有无限制使用所有测算工具、专属解梦服务、高级冥想课程、无广告体验等特权。'
  },
  {
    question: '如何开通VIP会员？',
    answer: '您可以选择月度、季度或年度套餐，通过微信、支付宝等方式完成支付即可开通。'
  },
  {
    question: 'VIP会员可以退款吗？',
    answer: '开通后24小时内可申请退款，超过24小时恕不退款。'
  }
];

function VIP() {
  return (
    <>
      <VIPHeader>
        <VIPBadge>
          <span>👑</span>
          <span>VIP会员</span>
        </VIPBadge>
        <Title>解锁全部功能，享受专属特权</Title>
        <Paragraph center>
          成为VIP会员，获得无限制访问所有高级功能的权限
        </Paragraph>
      </VIPHeader>

      <Grid columns={3} gap={spacing.lg}>
        <PricingCard>
          <PricingHeader>
            <PlanName>月度会员</PlanName>
            <PlanPrice>¥18</PlanPrice>
            <PlanDescription>每月付费，灵活选择</PlanDescription>
          </PricingHeader>
          <PricingBody>
            <FeatureList>
              <FeatureItem>无限制使用所有测算工具</FeatureItem>
              <FeatureItem>专属解梦服务</FeatureItem>
              <FeatureItem>高级冥想课程</FeatureItem>
              <FeatureItem>无广告体验</FeatureItem>
              <FeatureItem>优先客服支持</FeatureItem>
            </FeatureList>
            <Button variant="outline" style={{ width: '100%' }}>
              立即开通
            </Button>
          </PricingBody>
        </PricingCard>

        <PricingCard featured>
          <RecommendedBadge>推荐</RecommendedBadge>
          <PricingHeader featured>
            <PlanName>年度会员</PlanName>
            <PlanPrice>¥98</PlanPrice>
            <PlanDescription>超值年包，节省60%</PlanDescription>
          </PricingHeader>
          <PricingBody>
            <FeatureList>
              <FeatureItem>无限制使用所有测算工具</FeatureItem>
              <FeatureItem>专属解梦服务</FeatureItem>
              <FeatureItem>高级冥想课程</FeatureItem>
              <FeatureItem>无广告体验</FeatureItem>
              <FeatureItem>优先客服支持</FeatureItem>
              <FeatureItem>专属VIP活动</FeatureItem>
              <FeatureItem>生日特权</FeatureItem>
            </FeatureList>
            <Button variant="primary" style={{ width: '100%' }}>
              立即开通
            </Button>
          </PricingBody>
        </PricingCard>

        <PricingCard>
          <PricingHeader>
            <PlanName>季度会员</PlanName>
            <PlanPrice>¥48</PlanPrice>
            <PlanDescription>季度套餐，性价比高</PlanDescription>
          </PricingHeader>
          <PricingBody>
            <FeatureList>
              <FeatureItem>无限制使用所有测算工具</FeatureItem>
              <FeatureItem>专属解梦服务</FeatureItem>
              <FeatureItem>高级冥想课程</FeatureItem>
              <FeatureItem>无广告体验</FeatureItem>
              <FeatureItem>优先客服支持</FeatureItem>
            </FeatureList>
            <Button variant="outline" style={{ width: '100%' }}>
              立即开通
            </Button>
          </PricingBody>
        </PricingCard>
      </Grid>

      <BenefitsSection>
        <Title size="md" center>VIP会员专属特权</Title>
        <Grid columns={4} gap={spacing.lg}>
          <BenefitCard>
            <BenefitIcon>🔮</BenefitIcon>
            <BenefitTitle>无限制测算</BenefitTitle>
            <Paragraph secondary center>
              所有测算工具无次数限制
            </Paragraph>
          </BenefitCard>
          
          <BenefitCard>
            <BenefitIcon>🌙</BenefitIcon>
            <BenefitTitle>专属解梦</BenefitTitle>
            <Paragraph secondary center>
              专业解梦师一对一服务
            </Paragraph>
          </BenefitCard>
          
          <BenefitCard>
            <BenefitIcon>🧘</BenefitIcon>
            <BenefitTitle>高级课程</BenefitTitle>
            <Paragraph secondary center>
              独家冥想和心灵课程
            </Paragraph>
          </BenefitCard>
          
          <BenefitCard>
            <BenefitIcon>👑</BenefitIcon>
            <BenefitTitle>VIP活动</BenefitTitle>
            <Paragraph secondary center>
              参与专属线下活动
            </Paragraph>
          </BenefitCard>
        </Grid>
      </BenefitsSection>

      <TestimonialCard>
        <Title size="md">用户评价</Title>
        <TestimonialText>
          &quot;成为VIP会员后，我可以无限制地使用所有测算工具，专属解梦服务也非常专业。
          高级冥想课程帮助我更好地放松身心，强烈推荐！&quot;
        </TestimonialText>
        <TestimonialAuthor>- 用户张女士，年度会员</TestimonialAuthor>
      </TestimonialCard>

      <Card>
        <Title size="md">常见问题</Title>
        {faqItems.map((item, index) => (
          <div key={index} style={{ marginBottom: spacing.lg }}>
            <h4 style={{ color: colors.textPrimary, marginBottom: spacing.sm }}>
              {item.question}
            </h4>
            <Paragraph>{item.answer}</Paragraph>
          </div>
        ))}
      </Card>
    </>
  );
}

export default VIP;